<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口展示</title>
</head>
<body>
    <script>
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    alert('{{ message }}');
                {% endfor %}
            {% endif %}
        {% endwith %}
    </script>
    <style>
        .table {
            text-align: center;
            line-height: 25px;
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .table th, .table td {
            padding: 12px 15px;
            border: 1px solid #ddd;
        }

        .table th {
            background-color: #007BFF;
            color: white;
            font-weight: bold;
        }

        .table tr:hover {
            background-color: #f5f5f5;
        }

        .div_table {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
            padding: 20px;
            margin-top: 30px;
        }

        button {
            padding: 8px 16px;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin: 0 4px;
        }

        button:hover {
            background-color: #0056b3;
        }

        button[onclick*="delete_api"] {
            background-color: #dc3545;
        }

        button[onclick*="delete_api"]:hover {
            background-color: #c82333;
        }
    </style>
    

        <div style="display: flex;justify-content: center; margin-bottom: 30px;">
            <h1 style="font-size: 28px; margin-right: 20px;">接口数据中心</h1>
        </div>
        <div style="display: flex;justify-content: center; margin-bottom: 30px;">
            <button onclick="window.location.href = '/regist_api'" style="margin-right: 10px;">新增接口</button>
            <button onclick="window.location.href = '/'">返回首页</button>
        </div>

        <div class="div_table">
        <table border="1" class="table">
            <thead>
                <tr>
                    <th>接口名</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            {% for api_name, description in api_data %}
                <tr>

                    <td>{{api_name}}</td>
                    <td>{{description}}</td>
                    <td>
                        <button onclick="window.location.href='/api_detail?api_name={{api_name}}'">详情</button>
                        <button onclick="window.location.href='/show_ApiData?api_name={{api_name}}'">编辑</button>
                        <button onclick="window.location.href='/delete_api?api_name={{api_name}}'">删除</button> 
                    </td>

                </tr>
            {% endfor %}
            </tbody>

        </table>
    </div>

</body>
</html>
